<template>
  <div class="preview-container">
    <h3 v-html="previewArticleList.title" class="h"></h3>
    <span>{{ previewArticleList.createTime | dateFormat }}</span
    >&nbsp; &nbsp;
    <span v-html="previewArticleList.username"></span>
    &nbsp;
    <i class="el-icon-view"></i>
    <span v-html="previewArticleList.visits"></span>
    <el-container class="preview-main">
      <el-main v-html="previewArticleList.articleBody"></el-main>
    </el-container>
  </div>
</template> 

<script>
export default {
  name: "ArticlesPreview",
  props: {
    previewArticleList: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped lang='less'>
.preview-container {
  /deep/.el-dialog__body {
    padding: 0 20px !important;
    z-index: 1;
  }
  .preview-main {
    background-color: #f5f5f5;
    margin-top: 10px;
  }
  /deep/.h {
    margin: 0px;
    padding-bottom: 10px;
  }
}
</style>
